<template>
  <div class="bannerBox">
    <!-- 左侧课程列表显示区域 -->
    <div
      v-for="(item,index) in list[leftIndex].courseList"
      :key="index"
      class="courseList"
      :class="index===0?'oneBox':''"
    >
      <div class="course_con">
        <div class="course_con_hint">本周精选课程</div>
        <div class="course_con_title">{{ list[leftIndex].courseList[index].title }}</div>
        <div class="course_con_bottom">
          <!--<span>{{ list[leftIndex].courseList[index].hour }}/</span>-->
          <div class="hot">{{list[leftIndex].courseList[index].content}}</div>
        </div>
      </div>
      <div class="course_img">
        <img :src="list[leftIndex].courseList[index].url" />
        <img src="../../../../assets/editapp/icon_suspend2x.png" alt class="paly" />
      </div>
    </div>
    <!-- 右侧课程编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightList">
        <!-- 头部提示区域 -->
        <header class="title">本周精选课程列表设置</header>
        <div class="editCon">
          <div style="margin-top:20px;display: flex;align-items:center;">
            <span style="width:95px;text-align:right;display: inline-block;">选择分类：</span>
            <treeselect
              v-model="list[leftIndex].courseType"
              :multiple="false"
              :options="courseCategorys"
              @change="courseType($event)"
              style="width:200px;margin-left: 5px;"
            />
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">发布时间：</span>
            <el-select
              v-model="list[leftIndex].recentDay"
              placeholder="请选择"
              style="width:200px;"
              @change="recentDay($event)"
              value=""
            >
              <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">展示条数：</span>
            <el-select
              v-model="list[leftIndex].limit"
              placeholder="请选择"
              style="width:200px;"
              @change="limitNumber($event)"
              value=""
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">选择课程：</span>
            <el-button
              icon="el-icon-search"
              class="add_ad"
              style="width:200px;margin:5px 0;"
              @click="dialog = true"
            >选择
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="选择课程" :visible.sync="dialog" width="500px">
      <el-row>
        <el-input
          v-model="teacherName"
          clearable
          placeholder="请输入课程名称或关键字"
          style="width:200px;"
          @clear="filterTable = tableData"
          @keyup.enter.native="searchTeacher"
        ></el-input>
        <el-button type="primary" @click="searchTeacher">搜 索</el-button>
      </el-row>
      <el-table
        type="selection"
        ref="multipleTable"
        :data="newTable"
        tooltip-effect="dark"
        :row-key="getRowKey"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column prop="title" label="名称"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        :page-size="currentSize"
        :total="filterTable.length"
        style="margin-top:20px"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { courseList } from '@/api/user/user' // 数据接口
import { getCategoryList } from '@/api/subject/category'
import { getTenantId } from '@/utils/auth'

export default {
  components: { Treeselect },
  props: ['list', 'leftIndex'],
  data() {
    return {
      courseCategorys: [],
      rightIndex: 0,
      dialog: false,
      teacherName: '',
      filterTable: [],
      tableData: [],
      // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
      getRowKey(row) {
        return row.id
      },
      currentPage: 1,
      currentSize: 5,
      categoryId: '',
      EduUserVo: {},
      fileList: [],
      keyWord: '',
      courseDialogVisible: false,
      classDialogVisible: false,
      dayValue: '',
      limitValue: '',
      logofile: '',
      linkTableData: [
        { name: 'class NO.1', price: '2', number: '2', createTime: '2' }
      ],
      dayOptions: [
        { value: '3', label: '最近3天' },
        { value: '7', label: '最近7天' },
        { value: '15', label: '最近15天' },
        { value: '30', label: '最近30天' }
      ],
      cascaderOptions: [],
      selectOptions: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
        { value: '4', label: '4' },
        { value: '5', label: '5' }
      ]
    }
  },
  mounted() {
    this.getCourseCategorys();
    this.getCourseListData();
  },
  computed: {
    newTable() {
      return this.filterTable.slice(
        (this.currentPage - 1) * this.currentSize,
        this.currentPage * this.currentSize
      )
    }
  },
  methods: {
    getCourseCategorys() {
      getCategoryList('course', getTenantId(),'0')
        .then(response => {
          this.courseCategorys = response.data.items
        })
        .catch(() => {})
    },
    getCourseList() {
      this.EduUserVo.tenantId = getTenantId();
      this.EduUserVo.categoryId = this.list[this.leftIndex].courseType;
      this.EduUserVo.limit = this.list[this.leftIndex].limit;
      this.EduUserVo.day = this.list[this.leftIndex].recentDay;
      courseList(this.EduUserVo)
        .then(response => {
          this.list[this.leftIndex].courseList = response.data.items;
          this.list[this.leftIndex].courseList.map(i => {
            i.url = i.largePicture;
            i.liveStatus = i.status;
            i.teacher = i.userName;
            i.courseId = i.id;
            i.id = 0;
            i.money = i.price
          })
        })
        .catch(() => {})
    },
    courseType(item) {
      this.list[this.leftIndex].courseType = item[item.length - 1];
      this.getCourseList()
    },
    recentDay() {
      this.getCourseList()
    },
    limitNumber() {
      this.getCourseList()
    },
    searchTeacher() {
      // 如果有选择教师先清空多选数据
      this.$refs.multipleTable.clearSelection();
      this.multipleSelection = [];
      let search = this.teacherName;
      if (search) {
        this.filterTable = this.tableData.filter(function (dataNews) {
          return Object.keys(dataNews).some(function (key) {
            return ~String(dataNews[key])
              .toLowerCase()
              .indexOf(search)
          })
        })
      } else {
        this.filterTable = this.tableData
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleCancel() {
      this.clearDialog()
    },
    clearDialog() {
      this.dialog = false;
      this.$refs.multipleTable.clearSelection();
      this.multipleSelection = []
    },
    handleConfirm() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请选择课程');
        return
      }
      this.list[this.leftIndex].courseList.push(...this.multipleSelection);
      this.list[this.leftIndex].courseList = Array.from(new Set(this.list[this.leftIndex].courseList));
      this.list[this.leftIndex].courseList.map(i => {
        if (!i.url) {
          i.url = i.largePicture;
        }
        i.liveStatus = i.status;
        i.teacher = i.userName;
        i.courseId = i.id;
        i.id = 0;
        if (!i.money) {
          i.money = i.price;
        }
      });
      this.clearDialog()
    },
    // 接口获取数据
    getCourseListData() {
      this.EduUserVo.tenantId = getTenantId();
      // this.EduUserVo.categoryId = 0;
      // this.EduUserVo.limit = this.list[this.leftIndex].limit;
      // this.EduUserVo.day = this.list[this.leftIndex].recentDay;
      courseList(this.EduUserVo).then(response => {
        this.tableData = response.data.items;
        this.filterTable = response.data.items;
        this.total = response.data.total;
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.bannerBox {
  .course_title {
    display: flex;
    align-items: flex-end;
    padding: 10px;

    .course_title_left {
      font-size: 16px;
      font-weight: bold;
      position: relative;
    }

    .course_title_right {
      margin-left: 10px;
      font-size: 12px;
      color: #616161;
    }
  }

  .courseList {
    width: 100%;
    display: flex;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    padding: 10px;

    .course_img {
      width: 100px;
      // height: 112px;
      position: relative;
      flex-shrink: 0;

      .paly {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30px;
        height: 30px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }

    .course_con {
      padding: 5px;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      justify-content: space-between;
      .course_con_hint {
        font-size: 14px;
        font-weight: bold;
        color: #a59a5f;
      }
      .course_con_title {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        height: 32px;
      }
      .course_con_bottom {
        margin-top: 8px;
        display: flex;
        color: #616161;
        align-items: center;
        justify-content: space-between;
        .hot {
          color: #bcbcbc;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          height: 28px;
        }
      }
    }
  }
}

.editRightList {
  width: 400px;
  position: absolute;
  left: 105%;
  top: 0;
  padding: 10px;
  border: 1px solid #e1e1e1;
  background-color: #fafafa;

  .title {
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid #e1e1e1;

    .help-text {
      font-size: 12px;
      color: #616161;
      margin-top: 5px;
    }
  }

  .editCon {
    background-color: #fff;
    padding: 10px 5px;
    border: 1px solid #e1e1e1;
    margin-top: 5px;
  }
}
</style>
